import React, {PureComponent} from 'react';
import moment from 'moment';
import {connect} from 'dva';
import {routerRedux, Link} from 'dva/router';
import {Icon, Menu, Switch, Cascader,Carousel, Dropdown, Form, Card, Select, List, Button} from 'antd';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import StandardFormRow from '../../components/StandardFormRow';
import styles from './SliderList.less';

const {Option} = Select;
const FormItem = Form.Item;

/* eslint react/no-array-index-key: 0 */
@Form.create()
@connect(state => ({
    slider: state.slider,
}))
export default class GoodList extends PureComponent {
    state = {
        pagination: {pageSize: 20, page: 1, total: 0},

        type:'',
        category: [],
    }

    componentDidMount() {
        this.props.dispatch({
            type: 'slider/fetch',
            payload: {
                size: this.state.pagination.pageSize,
            },
        });
    }

    onPageChange = (page, pageSize) => {
        console.log(page, pageSize);
        this.props.dispatch({
            type: 'slider/fetch',
            payload: {
                size: this.state.pagination.pageSize,
                page,
                type: this.state.type,
            },
        });
    }
    handleFormSubmit = () => {
        const {form, dispatch} = this.props;
        // setTimeout 用于保证获取表单值是在所有表单字段更新完毕的时候

        setTimeout(() => {
            form.validateFields((err, values) => {
                if (!err) {
                    this.setState({
                        type: values.type,
                    });
                    console.log(values);
                    // eslint-disable-next-line
                    dispatch({
                        type: 'slider/fetch',
                        payload: {
                            size: this.state.pagination.pageSize,
                            type:values.type
                        },
                    });
                }
            });
        }, 0);
    }
    onIndexShowChange = (checked, item) => {
        console.log(checked, item);
        const {form, dispatch} = this.props;
        dispatch({
            type: 'slider/change',
            payload: {
                id: item.id,
                index_show: checked ? 1 : 0,
            },
            callback: () => {
                console.log('进入了回调');
                dispatch({
                    type: 'slider/fetch',
                    payload: {
                        size: this.state.pagination.pageSize,
                        page: this.state.pagination.page,
                        pid: this.state.pid,
                    },
                });
            },
        });
    }
    handleAdd = () => {
        this.props.dispatch(routerRedux.push('/act/slider/add'));
    }
    onMenuClick = (key, item) => {
        console.log(key,item);
        const {form, dispatch} = this.props;
        if (key === 'remove') {

            // console.log(payload);
            dispatch({
                type: 'slider/remove',
                payload: {id:item.id},
                callback: () => {
                    dispatch({
                        type: 'slider/fetch',
                        payload: {
                            size: this.state.pagination.pageSize,
                            page: this.state.pagination.page,
                            pid: this.state.pid,
                        },
                    });
                },
            });
        } else if (key === 'edit') {
            this.props.dispatch(routerRedux.push(`/act/slider/${item.id}`));
        }
    }

    render() {
        const {slider: {data, loading,options}, form} = this.props;
        const {getFieldDecorator} = form;
        const pagination = data.pagination;

        pagination.onChange = this.onPageChange;
        this.setState({
            pagination,
        });
        const menu = item => (
            <Menu onClick={({key}) => {
                this.onMenuClick(key, item);
            }}
            >
                <Menu.Item key="edit">
                    <Icon type="form"/> 编辑
                </Menu.Item>
                <Menu.Item key="remove">
                    <Icon type="delete"/> 删除
                </Menu.Item>
            </Menu>
        );
        const MoreBtn = item => (
            <Dropdown overlay={menu(item)}>
                <a>
                    更多操作 <Icon type="down"/>
                </a>
            </Dropdown>
        );
        const cardList = data.list ? (
            <List
                rowKey="id"
                pagination={pagination}
                loading={loading}
                grid={{gutter: 24, lg: 4, md: 3, sm: 2, xs: 1}}
                dataSource={data.list}
                renderItem={item => (
                    <List.Item>
                        <Card
                            className={styles.card}
                            hoverable
                            cover={<img style={{height:140}} alt={item.name} src={item.thumb}/>}
                        >
                            <Card.Meta
                                title={<Link to={`/avd/slider/${item.id}`}>{item.name}</Link>}
                                description={item.description}
                            />
                            <div className={styles.price} style={{marginTop: 10}}>
                                <span>类型</span>
                                <div className={styles.money}><Icon
                                    type="pay-circle"
                                    style={{marginRight: 8}}
                                />{item.type_label}
                                </div>
                            </div>
                            <div className={styles.price} style={{marginTop: 10}}>
                                <span>状态</span>
                                <div className={styles.money}>{item.status === 1 ? '启用' : '禁用'}</div>
                            </div>
                            <div className={styles.price} style={{marginTop: 10}}>
                                <span>跳转链接</span>
                                <div className={styles.money}>{item.page}</div>
                            </div>
                            <div className={styles.cardItemContent}>
                                <span>{moment(item.created_at, 'YYYY-MM-DD HH:mm:ss').fromNow()}</span>
                                {MoreBtn(item)}
                            </div>
                        </Card>
                    </List.Item>
                )}
            />
        ) : null;

        return (
            <PageHeaderLayout
                title="轮播图列表"
            >
                <div className={styles.coverCardList}>
                    <Card bordered={false}>
                        <Form layout="inline">
                            <StandardFormRow title="所属类别" block style={{paddingBottom: 11}}>
                                <FormItem>
                                    {getFieldDecorator('type', {})(
                                       <Select allowClear
                                               onChange={this.handleFormSubmit} >
                                           {options.map((item)=>{
                                               return (<Option key={item.value}>{item.label}</Option>)
                                           })}
                                       </Select>
                                    )}
                                </FormItem>
                            </StandardFormRow>
                        </Form>
                        <div className={styles.tableListOperator}>
                            <Button icon="plus" type="primary" onClick={this.handleAdd}>新增轮播图</Button>
                        </div>
                    </Card>
                    <div className={styles.cardList}>
                        {cardList}
                    </div>
                </div>
            </PageHeaderLayout>
        );
    }
}
